<template>
  <div class="ticket-list">
    <div class="top-tip">
      <div class="top-tip-left">
        <div class="top-tip-left-left"></div>
        <div class="top-tip-left-right">小米商城</div>
      </div>
      <div class="top-tip-right">
        {{
          !ticketData.isPay && !ticketData.isComment && !ticketData.isCommented
            ? "等待付款"
            : ticketData.isPay &&
              !ticketData.isComment &&
              !ticketData.isCommented
            ? "等待收货"
            : ticketData.isComment || ticketData.isCommented
            ? "已完成"
            : ""
        }}
      </div>
    </div>
    <div class="goods-list-wrap">
      <div class="goods-list-box">
        <div class="goods-list" v-for="(item, index) in ticketData.data">
          <div class="goods-img" @click="goToGoodsDetail({id:15694,router:$router})">
            <img class="auto-img" :src="item.img.img" alt="" />
          </div>
          <div class="goods-msg">
            <div class="goods-name-price">
              <div class="goods-name">{{ item.name }}</div>
              <div class="goods-price"><span>¥</span>{{ item.price }}</div>
            </div>
            <div class="goods-desc-num">
              <div class="goods-desc">{{ item.color }} {{ item.version }}</div>
              <div class="goods-num">x{{ item.num }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="goods-createtime-totalprice">
        <div class="goods-createtime">{{ ticketData.id }}</div>
        <div class="goods-totalprice">
          共 {{ totalNum }} 件商品 应付金额：<span
            ><span>¥</span>{{ ticketData.totalPrice }}</span
          >
        </div>
      </div>
      <div
        class="btn-box"
        v-if="!ticketData.isComment && !ticketData.isCommented"
      >
        <div
          class="btn"
          :class="{ cancel: index == 0 }"
          v-for="(item, index) in btnText"
          :key="index"
          @click="changeStatus(index)"
        >
          {{
            ticketData.isPay && !ticketData.isComment
              ? item.title2
              : !ticketData.isPay && !ticketData.isComment
              ? item.title
              : ticketData.isComment
              ? item.title3
              : ""
          }}
        </div>
      </div>
      <div class="btn-box" v-if="ticketData.isComment">
        <div
          class="btn"
          :class="{ cancel: index == 0 }"
          v-for="(item, index) in btnText.slice(1, 3)"
          :key="item.title"
          @click="changeStatus2(index)"
        >
          {{ item.title3 }}
        </div>
      </div>
      <div class="comment" v-if="ticketData.isCommented">
        <div class="user-comment">
          <div class="title">评价:</div>
          <div class="img-box" v-for="(item,index) in ticketData.imgs">
            <img class="auto-img" :src="item.content" alt="">
          </div>
          <div class="content">我:{{ticketData.content}}</div>
          <div class="rate">综合评分:{{ticketData.rate}}星</div>
        </div>
        <div class="btn cancel" @click="changeStatus2(0)">删除订单</div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  props: {
    ticketData: {},
  },
  computed: {
    totalNum() {
      let count = 0;
      this.ticketData.data.forEach((item) => {
        count += item.num;
      });
      return count;
    },
  },
  data() {
    return {
      //按钮文字
      btnText: [
        {
          title: "取消订单",
          title2: "取消订单",
          title3: "取消订单",
        },
        {
          title: "修改地址",
          title2: "修改地址",
          title3: "删除订单",
        },
        {
          title: "立即付款",
          title2: "确认收货",
          title3: "立即评价",
        },
      ],
    };
  },
  methods: {
    ...mapMutations(['goToGoodsDetail']),
    changeStatus(index) {
      if (index == 0) {
        this.$emit("cancelTicket");
      }
      if (index == 2) {
        this.$emit("payOrConfirm");
      }
    },
    changeStatus2(index) {
      if (index == 0) {
        this.$emit("cancelTicket");
      }
      if (index == 1) {
        this.$emit("toComment");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.ticket-list {
  width: 100%;
  background-color: #fff;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 10px;
  .top-tip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    .top-tip-left {
      display: flex;
      align-items: center;
      .top-tip-left-left {
        width: 28px;
        height: 28px;
        background: url("@/assets/images/home/icon-header-logo3.ddf2a1c313.png")
          no-repeat center center;
        background-size: cover;
      }
      .top-tip-left-right {
        font-size: 16px;
        font-weight: 600;
        margin-left: 10px;
      }
    }
    .top-tip-right {
      font-size: 16px;
      font-weight: 600;
      color: rgb(243, 121, 32);
    }
  }
  .goods-list-wrap {
    .goods-list-box {
      border-bottom: 1px solid #ddd;
      padding-bottom: 10px;
      .goods-list {
        margin: 10px 0 10px;
        display: flex;
        &:last-of-type {
          margin: 10px 0 0;
        }
        .goods-img {
          width: 88px;
          height: 88px;
          background-color: red;
          margin-right: 10px;
        }
        .goods-msg {
          width: calc(100% - 100px);
          .goods-name-price {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px;
            .goods-name {
              font-size: 15px;
              font-weight: 600;
              text-align: left;
              width: 150px;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
            .goods-price {
              color: #888;
              font-size: 14px;
              span {
                font-size: 12px;
                margin-right: 2px;
              }
            }
          }
          .goods-desc-num {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 10px;
            color: #888;
          }
        }
      }
    }
    .goods-createtime-totalprice {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .goods-createtime {
        color: #888;
      }
      .goods-totalprice {
        font-size: 14px;
        font-weight: 600;
        span {
          color: #aaa;
          font-size: 16px;
          span {
            margin-right: 2px;
            font-size: 12px;
          }
        }
      }
    }
    .btn-box {
      display: flex;
      align-items: center;
      justify-content: right;
      margin-top: 20px;
      .btn {
        width: 80px;
        height: 30px;
        line-height: 31px;
        border-radius: 4px;
        border: 1px solid rgb(243, 121, 32);
        color: rgb(243, 121, 32);
        font-size: 14px;
        font-weight: 600;
        &:nth-child(2) {
          margin: 0 10px;
        }
        &.cancel {
          color: #888;
          border: 1px solid #888;
        }
      }
    }
    .comment {
      margin-top: 10px;
      .user-comment{
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        .title{
          text-align: center;
        }
        .content{
          margin: 10px 0;
        }
        .img-box{
          width: 150px;
          height: 150px;
          border-radius: 8px;
          overflow: hidden;
          margin-top: 10px;
        }
      }
      .btn {
        width: 80px;
        height: 30px;
        line-height: 31px;
        border-radius: 4px;
        border: 1px solid #888;
        color: #888;
        font-size: 14px;
        font-weight: 600;
        margin-left: auto;
      }
    }
  }
}
</style>